<template>
  <div class="container">
    <div class="tag-wrapper">
      <el-tooltip
        :key="tag.code"
        v-for="tag in checkedInfo"
        effect="dark"
        :content="tag.namePath"
        placement="top-start"
      >
        <el-tag
          :disable-transitions="false"
          @close="handleClose(tag)"
          class="region-tag"
          :closable="closable"
        >
          {{ tag.name }}
        </el-tag>
      </el-tooltip>
    </div>
    <el-button
      v-if="addAreaBtnDisplay"
      type="primary"
      class="button-new-tag"
      size="small"
      @click="addRegion"
      >+ 新增区域</el-button
    >
    <SearchTreeDialog
      :treeInfo="treeData"
      :visible.sync="searchTreeDialogVisible"
      :checkedNodes="checkedInfo"
      @listenCheckedInfoEvent="bindCheckedInfoEvent"
    ></SearchTreeDialog>
  </div>
</template>
<script>
import SearchTreeDialog from './SearchTreeDialog'
export default {
  name: 'SelectTree',
  inheritAttrs: false,
  components: {
    SearchTreeDialog,
  },
  props: {
    checkedData: Array,
    data: Array,
    lazy: Boolean,
    addAreaBtnDisplay: {
      type: Boolean,
      default: true,
    },
    closable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      searchTreeDialogVisible: false,
      checkedInfo: [],
      treeData: this.data,
    }
  },
  watch: {
    checkedData: {
      handler(val) {
        this.checkedInfo = val
      },
      immediate: true,
    },
  },
  methods: {
    addRegion() {
      this.searchTreeDialogVisible = true
    },
    bindCheckedInfoEvent(val) {
      this.$emit('listenCheckedData', val)
    },
    handleClose(obj) {
      this.checkedInfo = this.checkedInfo.filter((item) => item.id !== obj.id)
      this.$emit('listenCheckedData', this.checkedInfo)
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
}
.tag-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .region-tag {
    margin-right: 10px;
    max-width: 120px;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    padding-right: 20px;
    &::v-deep .el-tag__close {
      position: absolute;
      top: 8px;
      right: 5px;
    }
  }
}
.button-new-tag {
  height: 40px;
}
.el-select__tags-text {
  display: inline-block;
  max-width: 100px;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-select .el-tag__close.el-icon-close {
  top: -7px;
  right: -4px;
}
</style>
